import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:series_play/comm/base/base_state.dart';
import 'package:series_play/comm/ext/context_ext.dart';
import 'package:series_play/generated/assets.dart';
import 'package:series_play/widget/app_color.dart';
import 'package:series_play/widget/app_image.dart';
import 'package:series_play/widget/app_text.dart';

class WalletRechargePage extends StatefulWidget {
  const WalletRechargePage({super.key});

  @override
  State<WalletRechargePage> createState() => _WalletRechargePageState();
}

class _WalletRechargePageState extends BaseState<WalletRechargePage> {
  var activeIndex = 0;

  @override
  Widget buildPage(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16).w,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              AppText.title('金币充值', color: Colors.white),
              Row(
                children: [
                  AppImage(Assets.imagesIcGold, size: 16),
                  6.horizontalSpace,
                  AppText('123123', color: Colors.white, fontSize: 13),
                ],
              ),
            ],
          ),
          20.verticalSpace,
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 16.w,
                mainAxisSpacing: 16.w,
                childAspectRatio: 1.8,
              ),
              itemBuilder: (context, index) {
                final child = Container(
                  decoration: activeIndex == index
                      ? BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              const Color(0xFF31343F),
                              const Color(0xffD90F52),
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            stops: [0.7, 1],
                          ),
                          border: Border.all(
                            color: const Color(0xFFD90F52),
                            width: 2.w,
                          ),
                          borderRadius: BorderRadius.circular(6).r,
                        )
                      : BoxDecoration(
                          color: const Color(0xFF31343F),
                          border: Border.all(
                            color: const Color(0xCF434653),
                            width: 2.w,
                          ),
                          borderRadius: BorderRadius.circular(6).r,
                        ),
                  child: Stack(
                    children: [
                      Align(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            AppImage(Assets.imagesIcGold, size: 18),
                            AppText.title(
                              '666655',
                              color: Colors.white,
                              fontSize: 20,
                            ),
                            AppText.secondary('\$12', color: AppColor.white_60),
                          ],
                        ),
                      ),
                      index == activeIndex
                          ? Positioned(
                              top: 0,
                              right: 0,
                              child: Container(
                                height: 16.w,
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 5,
                                ).w,
                                decoration: BoxDecoration(
                                  color: const Color(0xFFD90F52),
                                  borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(6).r,
                                    bottomLeft: Radius.circular(6).r,
                                  ),
                                ),
                                child: AppText(
                                  '+12%',
                                  color: Colors.white,
                                  fontSize: 12,
                                ),
                              ),
                            )
                          : Container(),
                    ],
                  ),
                );
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      activeIndex = index;
                    });
                  },
                  child: child,
                );
              },
              itemCount: 5,
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool showDefaultBackground() {
    return true;
  }

  @override
  String getTitle() {
    return context.tr.wallet;
  }
}
